<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a {
            display: block;
            height: 50px;
            width: 200px;
            box-sizing: border-box;
            text-decoration: none;
            text-align: center;
            line-height: 50px;
            background-color: white;
            margin: 10px 10px;
        }

        #Default {
            border: 1px solid #696B6D;
            border-radius: 10px;
            background-color: #fff;
            color: #696B6D;
        }

        #Default:active {
            /* 当点击时 背景颜色变为与边框一样的颜色 */
            color: #fff;
            background-color: #696B6D;
        }

        #Danger {
            border: 1px solid #ED5766;
            border-radius: 10px;
            background-color: #fff;
            color: #ED5766;
        }

        #Danger:active {

            color: #fff;
            background-color: #ED5766;
        }

        #Success {
            border: 1px solid #1E7AB9;
            border-radius: 10px;
            background-color: #fff;
            color: #1E7AB9;
        }

        #Success:active {

            color: #fff;
            background-color: #1E7AB9;
        }

        #Info {
            border: 1px solid #4AD0D1;
            border-radius: 10px;
            background-color: #fff;
            color: #4AD0D1;
        }

        #Info:active {
            color: #fff;
            background-color: #4AD0D1;
        }

        #Warning {

            border: 1px solid #F8AC5A;
            border-radius: 10px;
            background-color: #fff;
            color: #F8AC5A;
        }

        #Warning:active {
            color: #fff;
            background-color: #F8AC5A;
        }

        #Primary {

            border: 1px solid #1FB393;
            border-radius: 10px;
            background-color: #fff;
            color: #1FB393;
        }

        #Primary:active {
            color: #fff;
            background-color: #1FB393;
        }
    </style>
</head>

<body>
    <a href="#Default" id="Default">Default</a>
    <a href="#Danger" id="Danger">Danger</a>
    <a href="#Success" id="Success">Success</a>
    <a href="#Info" id="Info">Info</a>
    <a href="#Warning" id="Warning">Warning</a>
    <a href="#Primary" id="Primary">Primary</a>
</body>

</html>